<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>点聚合地图</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
            font-family: "微软雅黑", Arial, Helvetica, sans-serif;
        }

        .mapInIt {
            text-align: center;
            width: 100%;
            height: 3rem;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: #bbbbbb;
        }

        .map_back {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            text-align: center;
            background-color: #ffffff;
            color: #000000;
            font-weight: bold;
            position: absolute;
            right: 2rem;
            bottom: 2rem;
            font-size: .9em;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            box-shadow: 0 0 10px 1px #000;
            cursor: pointer;
            opacity: .7;
            z-index: 99;
            display: none;
        }

        .map_back span {
            display: block;
            margin-top: .5em;
            line-height: 1.2em;
        }

        /*去掉地图上高德的logo和版本号，虽然很不道德*/
        .amap-logo,
        .amap-copyright {
            opacity: 0;
            display: none;
            pointer-events: none;
        }

    </style>
</head>
<body>
<!--地图区域-->
<div id="container">
    <div class="mapInIt">地图加载中...</div>
    <div id="map_backBtn" class="map_back"><span>返回<br>总览</span></div>
</div>
<script src="http://webapi.amap.com/maps?v=1.4.6&key=d09ab504ad2e0432b952109318e79dd2&plugin=AMap.MarkerClusterer&callback=mapInit"></script>
<script type="text/javascript">
    var map, cluster, markers = [],
        dom_backBtn = document.getElementById('map_backBtn'),
        zoomMin = 3,
        zoomMax = 20,
        zoomNumber = 4,
        centerPoint = [105, 34];
    window.mapInit = function () {
        map = new AMap.Map("container", { //初始化地图
            resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
            buildingAnimation: true, //楼块出现是否带动画
            expandZoomRange: true, //是否支持可以扩展最大缩放级别,和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
            zooms: [zoomMin, zoomMax], //地图显示的缩放级别范围，在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
            zoom: zoomNumber, //地图显示的缩放级别，若center与level未赋值，地图初始化默认显示用户所在城市范围，3D地图下，zoom值，可以设置为浮点数。
            center: centerPoint //地图中心点

        });

        var dataMap = [
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    121.15,
                    31.89
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    109.781327,
                    39.608266
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.38,
                    37.35
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    122.207216,
                    29.985295
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    123.97,
                    47.33
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.13,
                    33.38
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    118.87,
                    42.28
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.33,
                    36.07
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    121.52,
                    36.89
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    102.188043,
                    38.520089
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    118.58,
                    24.93
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    121.05,
                    32.08
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    112.02,
                    22.93
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    121.48,
                    31.22
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    101.718637,
                    26.582347
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    117.93,
                    40.97
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    115.375279,
                    22.786211
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    124.37,
                    40.13
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    121.979603,
                    39.627114
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    109.47,
                    36.6
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    108.72,
                    34.36
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    115.89,
                    28.68
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    109.4,
                    24.33
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    109.511909,
                    18.252847
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    105.39,
                    28.91
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.5836,
                    31.2973
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.58395,
                    31.29755
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.58328,
                    31.2980
                ]
            },
            {
                "id": "952612878788",
                "org": "中国电信",
                "longlat": [
                    120.58228,
                    31.2980
                ]
            },
            {
                "id": "952712878788",
                "org": "中国电信",
                "longlat": [
                    120.58228,
                    31.2970
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "longlat": [
                    120.58238,
                    31.2970
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "longlat": [
                    120.58238,
                    31.2960
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "longlat": [
                    120.58248,
                    31.2965
                ]
            }
        ];
        for (var i = 0; i < dataMap.length; i++) { //标记点
            markers.push(new AMap.Marker({
                animation: "AMAP_ANIMATION_DROP",
                position: dataMap[i].longlat,
                // icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', //蓝色图标 默认
                // icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png', //红色图标
                extData: {
                    id: dataMap[i].id,
                    org: dataMap[i].org
                },
                map: map
            }));
        }

        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); //信息窗口对象
        for (var i = 0; i < markers.length; i++) { //标记点的点击事件
            markers[i].on('click', function (o) {
                var thisMarker = o.target;
                var geoLonLat = thisMarker.getPosition();
                map.setZoomAndCenter(zoomMax, geoLonLat);
                var extData = thisMarker.getExtData();
                var infoHtml = '<div style="padding: 5px 5px 5px 0;font-size: 12px;">设备串号：' + extData.id + '</div>'
                    + '<div style="padding: 0 5px 0 0;font-size: 12px;">所属机构：' + extData.org + '</div>'
                    + '<a href="javascript:void(0);" style="padding: 5px 5px 5px 00;font-size: 12px;color: #0c60ee;cursor: pointer;">查看详情>></a>';
                infoWindow.setContent(infoHtml);
                infoWindow.open(map, geoLonLat);
            });
        }
        dom_backBtn.addEventListener('click', function () {
            map.setZoomAndCenter(zoomNumber, centerPoint);
        });
        if (cluster) { //如果存在，则先清空
            cluster.setMap(null);
        }
        cluster = new AMap.MarkerClusterer(map, markers); //点聚合
        cluster.on('click', function () {
        });

        map.on('zoomchange', function () { //监听缩放事件，根据当前缩放等级，是否显示返回按钮
            var curZoom = map.getZoom();
            if (curZoom != zoomNumber) {
                dom_backBtn.style.display = "block";
            } else {
                dom_backBtn.style.display = "none";
            }
        });

    };
</script>
</body>
</html>